<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        如果在有输入内容的情况下,切换了类型,会发现文字依然显示之前的输入的内容
        因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素
        如果不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且保证key的不同
     -->
    <div id="app">
        <span v-if="isUser">
            <label for="username">用户帐号</label>
            <input type="text" id="username" placeholder="请输入用户帐号" key="username">
        </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" id="email" placeholder="请输入用户邮箱" key="email">
        </span>
        <button @click="isUser = !isUser">切换类型</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isUser: true
            }
        })
    </script>
</body>
</html>